<template>
  <view class="page">
    <u-sticky :offsetTop="0">
      <view class="head-tabs">
        <view class="tabs-wrap">
          <u-tabs
            :current="tabCurrent"
            :scrollable="false"
            :list="tabList"
            keyName="title"
            lineColor="#CB0011"
            :lineWidth="28"
            :lineHeight="2"
            @click="tabClick"
            :itemStyle="{ height: '50px', fontSize: '28rpx', color: '#B3B9C9' }"
            :activeStyle="{ fontWeight: 'bold', color: '#000000' }"
            :inactiveStyle="{}"></u-tabs>
        </view>
      </view>
    </u-sticky>

    <view class="page-ctx">
      <view class="view-wrap">
        <view class="order-view">
          <view class="order-wrap">
            <view class="order-list">
              <view class="item" v-for="(item, index) in orders" :key="index">
                <view class="item-top flex-between">
                  <text class="order-sn">订单号：{{ item.orderNo }}</text>
                  <text class="status">{{ item.statusInfo }}</text>
                </view>

                <view class="item-center">
                  <view class="products-wrap">
                    <view class="product-list">
                      <view
                        class="product-item flex"
                        v-for="(product, index) in item.products"
                        :key="index">
                        <view class="poster-box">
                          <image :src="product.image" mode="aspectFill"></image>
                        </view>
                        <view class="info">
                          <view class="title-box">
                            <view class="title">
                              {{ product.title }}
                            </view>
                          </view>
                          <view class="desc-box">
                            <view class="desc ellipsis-1">
                              {{ product.keyVals }}
                            </view>
                          </view>
                          <view class="price-box flex-between">
                            <view class="price-info">
                              <text class="price">
                                {{ product.jifen || 0 }}积分
                              </text>
                              <!-- <text class="huobi" style="font-size: 28rpx;">积分</text> -->
                              <text class="unit" v-if="product.unit">
                                /{{ product.unit }}
                              </text>
                            </view>
                            <text class="num">x {{ product.num }}</text>
                          </view>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
                <view class="item-bottom">
                  <view class="total-box">
                    <view class="price">实付款：{{ item.jifen }} 积分</view>
                  </view>
                  <view class="btns flex">
                    <view
                      class="btn fit-text btn-detail"
                      @click="toDetail(item)">
                      订单详情
                    </view>
                    <!-- 	<view v-if="item.is_allow_cancel" class="btn fit-text btn-cancel" @click="doCancel(item)">
											取消订单
										</view> -->
                    <!-- 			<view v-if="item.is_allow_pay" class="btn fit-text btn-pay" @click="doPay(item)">
											去支付
										</view> -->
                    <!-- 		<view v-if="item.is_allow_delete" class="btn fit-text" @click="doDelete(item)">
											删除订单
										</view> -->
                    <view
                      v-if="item.is_allow_receive"
                      class="btn fit-text btn-pay"
                      @click="doReceive(item)">
                      确认收货
                    </view>
                  </view>
                </view>
              </view>
            </view>

            <view class="load-more-wrap" style="margin-top: 40rpx">
              <u-loadmore :status="loadmore_status" />
            </view>
          </view>
        </view>
      </view>
    </view>

    <w_bottom_safe height="40" />
    <order_receive_pop
      data-title="订单确认收货"
      ref="order_receive_pop"
      @confirm="confrimReceive" />
  </view>
</template>

<script>
import order_receive_pop from "@/components/order/order_receive_pop.vue";
export default {
  components: {
    order_receive_pop,
  },
  data() {
    return {
      show_refund: false, //订单 售后切换
      //
      orders: [
        {
          orderNo: "111",
          statusInfo: "待审核",
        },
      ],
      order_select: {}, //
      count: 0,
      pagination: {
        page: 1,
        pageNum: 10,
      },
      loadmore_status: "loadmore", //loadmore  / loading / nomore

      statusNameMap: {
        "-5": "待付款", //已取消
        "-5_2": "订单已取消", //已取消
        2: "待发货",
        3: "待收货",
        4: "已完成",
        "-1": "无效",
      },

      tabCurrent: 0,
      tabSelect: {
        title: "全部",
        value: 0,
      },
      tabList: [
        {
          title: "全部",
          value: 0,
        },
        {
          title: "待发货",
          value: 2,
        },
        {
          title: "待收货",
          value: 3,
        },
        {
          title: "待评价",
          value: 6,
        },
        {
          title: "已完成",
          value: 5,
        },
      ],
    };
  },

  computed: {},
  onLoad(option) {
    // console.log('option', option)
    // if (option.status) {
    // 	this.tabSelect = this.tabList.find(v => v.value == option.status)
    // 	this.tabCurrent = this.tabList.findIndex(v => v.value == option.status)
    // }
  },
  onShow() {
    this.initQuery();
    this.setView();
  },
  onHide() {},
  onPullDownRefresh() {},
  onReachBottom() {
    this.loadMore();
  },
  methods: {
    loadMore() {
      if (this.loadmore_status == "loadmore") {
        this.loadmore_status = "loading";
        this.pagination.page++;
        this.query_order();
      }
    },
    initQuery() {
      this.orders = [];
      this.pagination.page = 1;
      this.loadmore_status = "loadmore";
    },
    setView() {
      this.query_order();
    },

    query_order() {
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "orders_lists",
          ...this.pagination,
          scene: this.tabSelect.value, //0全部 1待支付 2待发货 3待收货 4待评价 5已评价 -1无效
          type: 1, //订单类型：0-全部 1-积分订单 2-商城订单
        },
      }).then((res) => {
        if (res.code == 200) {
          this.count = res.data.count;
          let list = res.data.list;

          this.format_order_view_info(list);
          this.orders = this.orders.concat(list);
          this.loadmore_status =
            this.count > this.orders.length ? "loadmore" : "nomore";
        }
      });
    },
    format_order_view_info(list) {
      list.forEach((v) => {
        let jifen = 0;
        v.products.forEach((product) => {
          jifen += product.jifen * product.num;
        });
        v.jifen = jifen;
      });
    },

    tabClick(e) {
      this.$log("tab e", e);

      this.tabSelect = e;
      this.initQuery();
      this.setView();
    },

    toDetail(item) {
      this.toRoute({
        path: "/points-order-detail",
        query: {
          id: item.id,
        },
      });
    },

    doReceive(item) {
      this.order_select = item;
      this.$refs.order_receive_pop.init(item);
    },
    //确认取消订单
    confrimReceive() {
      this.showLoading();
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "orders_shouhuo",
          orderId: this.order_select.id,
        },
      }).then((res) => {
        this.hideLoading();
        this.$alert(res);
        if (res.code == 200) {
          // this.setView();
          this.changeOrderStatus(4);
        }
      });
    },

    doReview(item) {},
    doRefund(item) {},

    // 下列操作后需要改变订单状态码 并更新列表的订单按钮操作
    //取消订单
    //支付订单
    //订单售后
    //确认收货等操作后
    changeOrderStatus(status) {
      let item = this.order_select;
      let index = this.orders.findIndex((v) => v.id == item.id);
      //全部订单切换状态  其它隐藏
      if (this.tabSelect.value == 0) {
        //全部
        item.status = status;

        if (item.status == -5) {
          item.status_info = "订单已取消"; // 待支付  -> 订单已取消
        }
        this.format_order_view_info([item]);
        this.orders.splice(index, 1, item);
      } else {
        this.orders.splice(index, 1);
      }
    },
  },
};
</script>

<style lang="scss">
page {
  background: #f8f8f8;
}
</style>

<style lang="scss" scoped>
// ::v-deep .tabs-wrap .u-tabs__wrapper__nav__item {
// 	padding: 0 8rpx;
// }
.page {
}

.page-ctx {
  padding: 24rpx 32rpx;
}

.head-tabs {
  // position: fixed;
  // z-index: 10;
  // top: 0;
  // left: 0;
  // right: 0;
  background: #fff;
}

.tabs-wrap {
  padding-top: 0;
  box-shadow: 0rpx -10rpx 10rpx 1rpx rgba(0, 0, 0, 0.08);
  background: #f6f6f6;
  background: #fff;
  border-bottom: 1rpx solid #eee;

  .tabs {
    .tab-item {
      height: 100rpx;
      line-height: 100rpx;
      position: relative;
      // padding: 25rpx 0;
      text-align: center;
      flex: 1;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #222222;

      &.active {
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 28rpx;
        color: #222222;

        &::after {
          content: "";

          position: absolute;
          z-index: 2;
          bottom: 0;
          left: 50%;
          transform: translate(-50%);
          width: 40rpx;
          height: 6rpx;
          background: #44c4be;
          border-radius: 0rpx 0rpx 0rpx 0rpx;
        }
      }
    }
  }
}

// 退款订单
.order-wrap {
  .order-list {
    .item {
      margin-bottom: 24rpx;
      background: #ffffff;
      box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);
      border-radius: 16rpx 16rpx 16rpx 16rpx;

      padding: 32rpx 24rpx;
      margin-bottom: 20rpx;
      background: #ffffff;

      .item-top {
        padding: 0 0;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #666666;

        .order-sn {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #b3b9c9;
        }

        .status {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #ff0000;
        }
      }

      .item-center {
        // border-top: 1rpx solid #eee;
      }

      .item-bottom {
        // border-top: 1rpx solid #eee;
        // padding: 20rpx 0;

        .total-box {
          text-align: right;

          .price {
            text-align: right;
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            font-size: 28rpx;
            color: #000000;
          }
        }

        .btns {
          margin-top: 30rpx;
          flex: 1;
          justify-content: flex-end;
          overflow: hidden;
          flex-wrap: wrap;

          .btn {
            margin-left: 20rpx;
            padding: 0 24rpx;
            min-width: 146rpx;
            height: 64rpx;
            background: #f8f8f8;
            border-radius: 40rpx 40rpx 40rpx 40rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #333333;

            &.btn-detail {
            }

            &.btn-pay {
              background: #cb0011;
              color: #ffffff;
            }

            &.btn-reviews {
            }

            &.btn-cancel {
            }
          }
        }
      }
    }
  }

  .products-wrap {
    padding: 0 0;

    .product-list {
      .product-item {
        padding: 32rpx 0;

        & + .product-item {
          border-top: 1rpx solid #eee;
        }

        .poster-box {
          width: 176rpx;
          height: 176rpx;
          border-radius: 8rpx;
          overflow: hidden;

          image {
            width: 100%;
            height: 100%;
          }
        }

        .info {
          flex: 1;
          overflow: hidden;
          padding-left: 32rpx;

          .title-box {
          }

          .title {
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            font-size: 28rpx;
            color: #222222;
            line-height: 1.5;
          }

          .desc-box {
            margin-top: 14rpx;

            .desc {
              font-family: PingFang SC, PingFang SC;
              font-weight: 400;
              font-size: 24rpx;
              color: #b3b9c9;
            }
          }

          .price-box {
            margin-top: 24rpx;

            .price-info {
              .huobi {
                font-family: PingFang SC, PingFang SC;
                font-weight: bold;
                font-size: 20rpx;
                color: #000000;
              }

              .price {
                font-family: PingFang SC, PingFang SC;
                font-weight: bold;
                font-size: 28rpx;
                color: #000000;
              }

              .unit {
                font-family: PingFang SC, PingFang SC;
                font-weight: bold;
                font-size: 20rpx;
                color: #000000;
              }
            }

            .num {
              font-family: PingFang SC, PingFang SC;
              font-weight: bold;
              font-size: 24rpx;
              color: #000000;
            }
          }
        }
      }
    }
  }
}
</style>
